import { createApp } from 'vue';
import { CENSOR_TYPE_MAP } from './lib/constants.js';
import { clone } from './lib/handy.js';
import { initUser } from '/lib/user.js';
import { setContext } from './lib/context.js';
import UserComponent from './component/user.js';
import UploadComponent from './component/upload.js';
import CensorTypeComponent from './component/censorType.js';
import CensorResultComponent from './component/censorResult.js';
import OperationComponent from './component/operation.js';
import ModalComponent from './component/modal.js';
import BaseInfoFormComponent from './component/baseInfoForm.js';

createApp({
    data() {
        return {
            censorStatus: '',
            uploadStatus: '',
            censorType: '1',
            uuid: '',
            isUploading: false,
            isOperating: false,
            isFileExist: false,
            zipFileHash: '',
            fileList: [],
            censorTypeOptions: clone(CENSOR_TYPE_MAP),
            baseInfo: {},
            isShowBaseInfoForm: false,
        };
    },
    created() {
        setContext(this);
    },
    components: {
        UserComponent,
        UploadComponent,
        CensorTypeComponent,
        CensorResultComponent,
        OperationComponent,
        ModalComponent,
        BaseInfoFormComponent,
    },
    methods: {},
    mounted() {
        initUser().then((uuid) => {
            if (!uuid) {
                console.error('no uuid');
                return;
            }
            this.uuid = uuid;
        });
    },
    computed: {
        isSubmitDisabled() {
            if (this.isOperating) {
                return true;
            }
            if (this.censorType == 0) {
                return true;
            }
            if (!this.isFileExist) {
                return true;
            }
            return false;
        },
    },
    /* template */
    template: `<form id="uploadForm" enctype="multipart/form - data">
            <UploadComponent :uploadStatus="uploadStatus"
                @update:uploadStatus="$event => (uploadStatus = $event)"
                @update:isFileExist="$event => (isFileExist = $event)"
                @update:zipFileHash="$event => (zipFileHash = $event)"
                @update:fileList="$event => (fileList = $event)" />
            <div class="censor-wrapper">
                <CensorTypeComponent :censorType="censorType"
                :zipFileHash="zipFileHash"
                :censorTypeOptions="censorTypeOptions"
                :censorStatus="censorStatus"
                :isOperating="isOperating"
                :isUploading="isUploading" />
            </div>
        </form>
        <ModalComponent v-show="isShowBaseInfoForm" id="base-info-modal">
            <BaseInfoFormComponent :baseInfo="baseInfo" />
        </ModalComponent>
        `,
}).mount('#app');
